<template>
	<view class="det_box">
		<view class="obj">
			<image :src="list[0].pic">
			</image>
			<view>{{list[0].productName}}</view>
			<view>{{list[0].scoreNum}}</view>
			<view>/积分</view>
		</view>
		<view class="address">
			<view class="title">适用门店</view>
			<view class="inf">
				<view>{{list_hal[0].name}}</view>
				<view>{{minDis}}km</view>
				<view>{{list_hal[0].address}}</view>
				<view class="icon">
					<view class="img" @click="callphone">
						<image
							src="https://cdn8.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u637.png">
						</image>
					</view>
				</view>
				<view class="icon">
					<view class="img">
						<image
							src="https://cdn8.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u640.png">
						</image>
					</view>
				</view>
				<view class="dist">
					<view>距我最近</view>
				</view>
				<view>10:00-22:00</view>
			</view>
			<view class="more" @click="store">
				<view>{{hallNum}}家门店可用</view>
				<view class="more_address">
					<image src="https://cdn8.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u898.png"></image>
				</view>
			</view>
		</view>
		<view class="other">
			<view class="title">商品详情</view>
			<view>1.有效期：兑换后当天生效，有效期1个月。</view>
			<view class="explain">2.适用：仅限堂食。</view>
			<view class="explain">3.本券不与其他优惠叠加使用，不可转让、转售，不可兑换为现金。</view>
			<view class="explain">4.本优惠券不可开发票。</view>
		</view>
		<view class="btn" @click="exchange">
			<view>立即兑换</view>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http.js'
	export default {
		data() {
			return {
				phone:'',
				status:'',
				userid:'',
				score:'',
				scoreShopId:'',
				hallNum:'',
				minDis:'',
				list:[
					{
						id:'',
						productName:'',
						scoreNum:'',
						shopID:'',
						pic:''
					}
				],
				list_hal:[]
			}
		},
		onShow() {
			this.phone=uni.getStorageSync('phone');
			this.status=uni.getStorageSync('status');
			this.scoreShopId=uni.getStorageSync('scoreShopId');
			// this.userid=uni.getStorageSync("userid");
			// console.log(this.phone,this.status,this.userid);
			// console.log("data[0].id:",res.data[0].id)
			this.goodsdetail();
			this.hallnum();
			this.mindishall();
		},
		methods: {
			mindishall(){
				http({
					method:'post',
					url:'/minhall',
					data:{
						// scoreShopId:this.scoreShopId
					},
					success:(res)=>{
						console.log(res);
						if(res.data){
							// this.list_hal=res.data.data;
							this.minDis=res.data.data[0].mindis;
						};
						http({
							method:'post',
							url:'/hallmindis',
							data:{
								minDistance:this.minDis
							},
							success:(res)=>{
								console.log("mindis_res",res);
								if(res.data){
									this.list_hal=res.data.data;
								}
							}
						})
					}
				})
			},
			hallnum(){
				http({
					method:'post',
					url:'/hallnum',
					data:{
						// scoreShopId:this.scoreShopId
					},
					success:(res)=>{
						if(res.data){
							this.hallNum=res.data.data[0].num;
						}
						// console.log(this.hallNum)
					}
				})
			},
			goodsdetail(){
				http({
					method:'post',
					url:'/goodsdet',
					data:{
						scoreShopId:this.scoreShopId
					},
					success:(res)=>{
						if(res.data){
							this.list=res.data.data;
						}
					}
				})
			},
			exchange(){
				
				http({
					method:'post',
					url:'/getUID',
					data:{
						phone:this.phone
					},
					success:(res)=>{
						this.userid=res.data.data[0].id
						this.score=res.data.data[0].score
						console.log(res.data.data[0].id)//用户ID
						uni.setStorageSync("userid",res.data.data[0].id);
						if(res.data.msg=='登录成功'){
							// uni.setStorageSync('state',id);
							uni.navigateTo({
								url:'/pages/exchange/exchange?Uid=res.data.data[0].id',
								// ?id=state
							})
						}else if(res.data.msg=='请先登录'){
							uni.navigateTo({
								url:'/pages/login/login',
								// ?id=state
							})
						}
					}
				})
				
			},
			store(){
				uni.navigateTo({
					url:'/pages/store/store',
					// ?id=state
				})
			},
			callphone(){
				uni.showModal({
					title: '联系电话',
					content: '18878006788',
					success: function (res) {
						if (res.confirm) {
							console.log('拨打');
						} else if (res.cancel) {
							console.log('取消');
						}
					}
				})
			}
		}
	}
</script>

<style>
	.det_box {
		width: 375px;
		height: 700px;
		background-color: rgba(245, 247, 247, 1);
	}

	.obj {
		height: 600rpx;
		background-color: white;
	}

	.obj image {
		margin-left: 4%;
		margin-top: 20rpx;
		width: 680rpx;
		height: 420rpx;
	}

	.obj view:nth-child(2) {
		font-size: 36rpx;
		color: #333;
		margin-bottom: 16rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
	}

	.obj view:nth-child(3) {
		font-size: 36rpx;
		color: #333;
		display: inline-block;
		margin-left: 30rpx;
	}

	.obj view:nth-child(4) {
		font-size: 24rpx;
		color: #999;
		display: inline-block;
	}

	.address {
		height: 380rpx;
		background-color: white;
		margin-top: 30rpx;
	}
	.title {
		color: #333;
		font-size: 28rpx;
		line-height: 30rpx;
		padding: 30rpx;
	}

	.inf {
		margin-left: 30rpx;
		width: 680rpx;
		height: 220rpx;
		border: rgba(239, 239, 239, 1) solid 2rpx;
		border-radius: 30rpx;
		/* position: relative; */
	}

	.inf view:nth-child(1) {
		font-size: 32rpx;
		color: #333;
		margin: 20rpx 10rpx 10rpx 10rpx;
	}

	.inf view:nth-child(2) {
		font-size: 24rpx;
		color: #999;
		margin: 10rpx;
		display: inline-block;
	}

	.inf view:nth-child(3) {
		font-size: 24rpx;
		color: #999;
		margin: 10rpx;
		display: inline-block;
	}

	.inf view:nth-child(7) {
		font-size: 24rpx;
		color: #999;
		/* margin-top: 0rpx; */
		margin-left: 20rpx;
		display: inline-block;
		position: absolute;
		/* top: 2rpx; */
	}

	.icon {
		display: inline-block;
		margin-left: 100rpx;
	}

	.icon .img {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		margin-left: 50rpx;
		background-color: rgba(247, 114, 20, 0.0980392156862745);
	}

	.icon .img image {
		width: 20rpx;
		height: 20rpx;
		margin-left: 30%;
	}

	.dist {
		width: 160rpx;
		height: 40rpx;
		border-radius: 8rpx;
		margin-left: 10rpx;
		display: inline-block;
		background-color: rgba(247, 114, 20, 0.0980392156862745);
		position: relative;
/* 		font-size: 24rpx;
		line-height: 24rpx; */
		color: #F77214;
		text-align: center;
	}

	.dist view {
		height: 100%;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #F77214;
		text-align: center;
		position: absolute;
		top: -10rpx;
	}
	.more{
		height: 24rpx;
		text-align: center;
		margin-top: 10rpx;
	}
	.more view:nth-child(1){
		font-size: 24rpx;
		color: #999;
		display: inline-block;
	}
	.more .more_address{
		width: 14rpx;
		height: 22rpx;
		display: inline-block;
	}
	.more_address image{
		width: 100%;
		height: 100%;
	}
	.other{
		height: 300rpx;
		margin-top: 30rpx;
		background-color: white;
	}
	.other view:nth-child(2){
		font-size: 24rpx;
		color: #999;
		margin-left: 30rpx;
	}
	.explain{
		font-size: 24rpx;
		color: #999;
		margin-top:10rpx;
		margin-left: 30rpx;
	}
	.btn{
		height: 90rpx;
		background-color: white;
		margin-top: 20rpx;
	}
	.btn view{
		border-radius: 90rpx;
		width: 80%;
		margin-left:10%;
		height: 90rpx;
		font-size: 32rpx;
		text-align: center;
		line-height: 90rpx;
		color: white;
		background-color: rgba(247, 114, 20, 1);
	}
</style>
